<h3>1.tiOverflow默认是inline-block，可以设置max-width，min-width，width。width默认值是auto包裹子内容</h3>
<div tiOverflow style="max-width: 100px; padding: 10px; background-color: yellow">binggo</div>
<br />
<div tiOverflow style="width: 100px; padding: 10px; background-color: yellow">binggo</div>
<br />
<div tiOverflow style="max-width: 100px; padding: 10px; background-color: yellow">明月几时有，把酒问青天。</div>
<br />
<div tiOverflow style="max-width: 100px; padding: 10px; background-color: yellow">teadmin-&lt;script&gt;alert(1)&lt;/script&gt;</div>
<br />
<p>因为overflow:hidden会改变对齐方式。所以后面的span改改对齐方式即可：</p>
<div tiOverflow style="width: 100px; display: inline-block">但愿人长久，千里共婵娟。</div>
<span style="vertical-align: top">作者：苏轼</span>
<br />
<p>文图混排效果：</p>
<div tiOverflow style="max-width: 100px">
  但愿人长久
  <ti-icon class="text-yellow-500" name="warn" style="max-width: 100px"></ti-icon>千里共婵娟。
</div>
<h3>2.外层设置宽度（随外层），外层必须是block/inline-block，tiOverflow也改为block</h3>
<span style="display: inline-block; width: 100px">
  <div tiOverflow>月有阴晴圆缺，此事古难全。</div>
</span>
<span style="display: inline-block; width: 100px">
  <div tiOverflow style="background-color: yellow">Bingo</div>
</span>
<div style="width: 100px">
  <div tiOverflow>月有阴晴圆缺，此事古难全。</div>
</div>
<span style="width: 100px">
  <div tiOverflow>月有阴晴圆缺，此事古难全。（此条未截取，因为父类不是block）</div>
</span>
<br />
<h3>3.外层设置最大宽度（随内层）,外层必须是inline-block，tiOverflow也改为block</h3>
<span style="display: inline-block; max-width: 100px">
  <div tiOverflow>月有阴晴圆缺，此事古难全。</div>
</span>
<span style="display: inline-block; max-width: 100px">
  <div tiOverflow style="background-color: yellow">bingo</div>
</span>
<div style="max-width: 100px">
  <div tiOverflow>月有阴晴圆缺，此事古难全。</div>
</div>
<span style="max-width: 100px">
  <div tiOverflow>月有阴晴圆缺，此事古难全。（此条未截取，因为父类不是block）</div>
</span>
<h3>4.测试跳转到其他路由地址后，tip是否消失</h3>
<a class="link" tiOverflow tiTipPosition="right" (click)="goto()"> 明月几时有，把酒问青天。</a>
<style>
  .link {
    max-width: 100px;
    cursor: pointer;
    color: var(--ti-common-color-text-link);
    text-decoration: none;
  }

  .link:hover {
    color: var(--ti-common-color-text-link-hover);
    text-decoration: underline;
  }
</style>
